<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
		<link rel="stylesheet" href="/pc-static/css/help.css">
	<div class="app-content">
		<div class="help">
			<div class="sub-nav">
				<a  href="#/">首页</a><span>&gt;</span>
				<a  href="#/help">帮助中心</a>
			</div>
			<div class="help-box">
				<div class="help-bg">
					<div class="left-side">
						
					</div>
					<div class="right-side">
						
					</div>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript">
	console.log(type)
	
	$.ajax({    //查出所有的帮助类型
		url: "/explains/findTypeExplain.do",
		type: "post",
		data: {"type": 1},
		success: function(data) {
			var newData=data.data
			console.log(newData)
			$(".left-side").empty();
			for(i=0;i<newData.length;i++){
				$(".left-side").append("<a><div class='nav-title'><i class='iconfonts icon-sub'></i><i class='iconfonts icon-tianjiaguize'></i>"+newData[i].menu+"<em class='sj'>&nbsp;</em></div></a>")
			}
		},
	})
	
	$.ajax({
		url: "/explains/findTypeExplain.do",
		type: "post",
		data: {"type":2},
		success: function(data) {
			var newData=data.data
			var html=""
			
			if(type==""){  //默认的帮助中心的展示
				$(".right-side").empty();
				html+= "<ul class='ul'>"+
				"<li class='circle'><i class='iconfonts icon-zhuce'></i>"+
					"<div>"+
						"<a class='goto link 42'>注册</a>"+
					"</div>"+
				"</li>"+
				"<li class='circle'><i class='iconfonts icon-chongzhi1'></i>"+
					"<div>"+
						"<a class='goto link 47'>充值</a>"+
					"</div>"+
				"</li>"+
				"<li class='circle'><i class='iconfonts icon-touzi'></i>"+
					"<div>"+
						"<a class='goto link 85'>投注</a>"+
					"</div>"+
				"</li>"+
				"<li class='circle'><i class='iconfonts icon-jiangliduihuan'></i>"+
					"<a class='goto link 51' >兑奖</a>"+
				"</li>"+
				"<li class='circle'><i class='iconfonts icon-duijiangtikuan'></i>"+
					"<div>"+
						"<a class='goto link 53'>提款</a>"+
					"</div>"+
				"</li>"+
			"</ul>"+
			 "<div class='under-circle'>"+
				"<div><i class='iconfonts icon-wenhaosvg'></i><span><a class='goto 42' >如何注册</a></span></div>"+
				"<div><i class='iconfonts icon-wenhaosvg'></i><span><a class='goto 47' >如何充值</a></span></div>"+
				"<div><i class='iconfonts icon-wenhaosvg'></i><span><a class='goto 85'>如何投注</a></span></div>"+
				"<div><i class='iconfonts icon-wenhaosvg'></i><span><a class='goto 51'>如何兑奖</a></span></div>"+
				"<div><i class='iconfonts icon-wenhaosvg'></i><span><a class='goto 53'>如何提款</a></span></div>"+
			"</div>"+
			"<div class='list_box_main'>"+
			"</div>"
				$(".right-side").append(html)
				$(".list_box_main").empty();
				for(j=1;j<$(".left-side a").length;j++){
					var name=$(".left-side a").eq(j).find(".nav-title").text().trim();
					$(".list_box_main").append("<div class='list_box'><h2>"+name+"</h2><ul></ul></div>")
					for(i=0;i<newData.length;i++){
						var item=newData[i]
						
						if(item.menu==name){
							if($(".list_box_main .list_box").eq(j-1).find("li").length<4){
								$(".list_box_main .list_box").eq(j-1).find("ul").append("<li class='help_index_rows_a'><a class='goto' data-id='0/"+i+"''>"+item.doubt+"</a></li>")
							}
						}
					}
				}
				for(j=0;j<5;j++){
					for(i=0;i<newData.length;i++){
						var item=newData[i]
						if($(".circle").eq(j).find("a").attr("class").split(" ")[2]==item.id){
							$(".circle").eq(j).find("a").attr("data-id","0/"+i+"")
						}
						if($(".under-circle div").eq(j).find("a").attr("class").split(" ")[1]==item.id){
							$(".under-circle div").eq(j).find("a").attr("data-id","0/"+i+"")
						}
					}
				}
			}else{
				bindTypeData("新手上路",type)
				$(".left-side").find("a:first").find(".nav-title").css("background-color","#e63a2f")
				$(".left-side").find("a:first").find(".nav-title").css("color","white") 
				$(".left-side").find("a:first").find(".icon-sub").css("display","inline-block") 
				$(".left-side").find("a:first").find(".icon-sub").css("color","white") 
				$(".left-side").find("a:first").find(".icon-tianjiaguize").css("display","none")
			    $(".left-side").find("a:first").siblings().find(".nav-title").css("background-color","transparent")
				$(".left-side").find("a:first").siblings().find(".nav-title").css("color","#333") 
				$(".left-side").find("a:first").siblings().find(".icon-sub").css("color","#e63a2f")
				$(".left-side").find("a:first").siblings().find(".icon-sub").css("display","none")
				$(".left-side").find("a:first").siblings().find(".icon-tianjiaguize").css("display","inline-block")
			}
		},
	})

	
	
	

	function bindTypeData(kind,dataId){    //点击显示类型
		$(".right-side").empty();
		$.ajax({
			url: "/explains/findTypeExplain.do",
			type: "post",
			data: {"type":2},
			success: function(data) {
				var newData=data.data
				var count=0;
				var count1=0;
				for(i=0;i<newData.length;i++){
					var item=newData[i]
					if(item.menu==kind){
						count++
						var html="<div class='Collapsible'>"+
									"<span class='Collapsible__trigger is-closed'>"+
										"<div class='collapse' id='help1'>"+count+"、"+item.doubt+"</div>"+
									"</span>"+
									"<div class='Collapsible__contentOuter' style='height: 0px; transition: height 200ms linear 0s; overflow: hidden;'>"+
										"<div class='Collapsible__contentInner'>"+
											"<div class='collapse-content'>"+item.content+"</div>"+
										"</div>"+
									"</div>"+
								"</div>"
						$(".right-side").append(html)
					}
					
					if(kind=="新手上路"){
						count1++
						/* var len=$('.left-side a').length-1 */
						var html="<div class='Collapsible' data-id='0/"+i+"'>"+
									"<span class='Collapsible__trigger is-closed'>"+
										"<div class='collapse'>"+count1+"、"+item.doubt+"</div>"+
									"</span>"+
									"<div class='Collapsible__contentOuter' style='height: 0px; transition: height 200ms linear 0s; overflow: hidden;'>"+
										"<div class='Collapsible__contentInner'>"+
											"<div class='collapse-content'>"+item.content+"</div>"+
										"</div>"+
									"</div>"+
								"</div>"
						$(".right-side").append(html)
					}
					if($(".Collapsible").eq(i).attr("data-id")==dataId){
						console.log("哈哈啊哈")
						$(".Collapsible").eq(i).find(".Collapsible__trigger").removeClass("is-closed").addClass("is-open")
						var height=$(".Collapsible").eq(i).find(".collapse-content").height()+1;
						$(".Collapsible").eq(i).find(".Collapsible__contentOuter").css("height",height+"px") 
						$(".Collapsible").eq(i).siblings().find(".Collapsible__trigger").removeClass("is-open").addClass("is-closed")
						$(".Collapsible").eq(i).siblings().find(".Collapsible__contentOuter").css("height","0px")
						var scorllHeight=$(".Collapsible").eq(i)[0].offsetTop;
						 $("html").animate({scrollTop:scorllHeight}, 1000);  
					}
				}
			}
		})
	}
	$(".right-side").on("click",".goto",function(){
		console.log("进来了")
		var dataId=$(this).attr("data-id")
		bindTypeData("新手上路",dataId)
		$(".left-side").find("a:first").find(".nav-title").css("background-color","#e63a2f")
		$(".left-side").find("a:first").find(".nav-title").css("color","white") 
		$(".left-side").find("a:first").find(".icon-sub").css("display","inline-block") 
		$(".left-side").find("a:first").find(".icon-sub").css("color","white") 
		$(".left-side").find("a:first").find(".icon-tianjiaguize").css("display","none")
	    $(".left-side").find("a:first").siblings().find(".nav-title").css("background-color","transparent")
		$(".left-side").find("a:first").siblings().find(".nav-title").css("color","#333") 
		$(".left-side").find("a:first").siblings().find(".icon-sub").css("color","#e63a2f")
		$(".left-side").find("a:first").siblings().find(".icon-sub").css("display","none")
		$(".left-side").find("a:first").siblings().find(".icon-tianjiaguize").css("display","inline-block")
	})
	
	$(".right-side").on("click",".Collapsible",function(){
		if($(this).find(".Collapsible__trigger").hasClass("is-closed")){
			$(this).find(".Collapsible__trigger").removeClass("is-closed").addClass("is-open")
			var height=$(this).find(".collapse-content").height()+1;
			 $(this).find(".Collapsible__contentOuter").css("height",height+"px") 
			 $(this).siblings().find(".Collapsible__trigger").removeClass("is-open").addClass("is-closed")
			 $(this).siblings().find(".Collapsible__contentOuter").css("height","0px")
		}else{
			$(this).find(".Collapsible__trigger").removeClass("is-open").addClass("is-closed")
			$(this).find(".Collapsible__contentOuter").css("height","0px")
		}
	})

	 $(".left-side").on("click","a",function(){  //侧边栏帮助类型切换
		 $(this).find(".nav-title").css("background-color","#e63a2f")
		 $(this).find(".nav-title").css("color","white") 
		 $(this).find(".icon-sub").css("display","inline-block") 
		 $(this).find(".icon-sub").css("color","white") 
		 $(this).find(".icon-tianjiaguize").css("display","none")
	     $(this).siblings().find(".nav-title").css("background-color","transparent")
		 $(this).siblings().find(".nav-title").css("color","#333") 
		 $(this).siblings().find(".icon-sub").css("color","#e63a2f")
		 $(this).siblings().find(".icon-sub").css("display","none")
		 $(this).siblings().find(".icon-tianjiaguize").css("display","inline-block")
		 var name=$(this).find(".nav-title").text().trim();
		 bindTypeData(name,0)
	}) 
</script>
